<template>
  <div id="ActivityIndex">
    <main-header :title="'活动管理'" :showAddActivityBtn="true" :crumbsArr="crumbsArr" />
    <div class="main">
      <activity-table
        :activityData="activityData"
        :pageInfo="pageInfo"
        v-loading="loadActivityListLoad"
        @reloadPage="loadActivityListData"
        @currentChange="loadActivityListData"
      />
    </div>
  </div>
</template>

<script>
import MainHeader from '@/components/layouts/MainHeader'
import ActivityTable from '@/components/pages/activity/ActivityTable'
import API from '@/config/api.js'
import ErrorConfig from '@/config/error.config.js'

export default {
  name: 'ActivityIndex',
  data () {
    return {
      crumbsArr: [ // 面包屑
        { name: 'welcome', txt: '首页' }, { txt: '活动管理' }
      ],
      pageInfo: {
        pageCount: 1,
        pageSize: 0,
        currentPage: 1
      },
      activityData: null,
      loadActivityListLoad: false
    }
  },
  components: {
    MainHeader,
    ActivityTable
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.initPage()
    })
  },
  watch: {
    // '$route' (to, from) {
    //   if (to.name === 'activity') {
    //     this.initPage()
    //   }
    // }
  },
  methods: {
    initPage () { // 初始化方法
      this.loadActivityListData()
    },
    async loadActivityListData (page = this.pageInfo.currentPage) { // 加载表格数据
      console.log(page)
      this.loadActivityListLoad = true
      const response = await API.queryActivityList({ page })
      const { code, data } = response
      if (code === 1) {
        const { pageCount, pageSize, pageIndex } = data
        this.activityData = data.rows
        this.pageInfo.pageCount = pageCount
        this.pageInfo.pageSize = pageSize
        this.pageInfo.currentPage = pageIndex
      } else {
        if (code === -1) {
          const { msg } = response
          this.$message.error(msg)
        } else {
          this.$message.error(ErrorConfig[code])
        }
      }
      this.loadActivityListLoad = false
    },
    editBtnClick () { // 编辑活动

    },
    deleteBtnClick () { // 删除活动
    }
  }
}
</script>

<style scoped lang="scss">
  #ActivityIndex {
    .main {
      padding: 20px 20px 0;
      .el-pagination {
        margin-top: 20px;
        text-align: center;
      }
    }
  }
</style>
